<template>
    <el-table
      :data="processedDepartInfo"
      style="width: 100%"
      height="300"
      row-key="departId"
      :default-expand-all="false"
    >
      <!-- 展开行 -->
      <el-table-column type="expand">
        <template #default="{ row }">
          <el-table :data="row.detailList" border>
            <el-table-column prop="name" label="分类" align="center"/>
            <el-table-column prop="codeName" label="名称" width="180" align="center"/>
            <el-table-column prop="count" label="数量" align="center"/>
           
          </el-table>
        </template>
      </el-table-column>
  
      <!-- 固定列 -->
      <el-table-column prop="departName" label="单位名称" />
      <el-table-column prop="categoryName" label="单位类别" />
  
      <!-- 动态指标列 -->
      <el-table-column
        v-for="(name, index) in indexNames"
        :key="index"
        :prop="'indexValues.' + name"
        :label="name"
      >
        <template #default="{ row }">
          {{ row.indexValues[name] | formatNumber }}
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop,Watch } from 'vue-property-decorator';
  
  interface DepartInfo {
    departId: number;
    departName: string | null;
    categoryName: string | null;
    indexNameMap: Record<string, number>;
    detailList: Array<{
      index: string;
      name: string;
      codeName: string;
      count: number;
    }>;
  }
  
  interface ProcessedDepartInfo extends Omit<DepartInfo, 'indexNameMap'> {
    indexValues: Record<string, number>;
  }
  
  @Component({
    components: { },
    filters: {
      formatNumber(value: number) {
        return value.toLocaleString();
      }
    }
  })
  export default class DepartInfoTable extends Vue {
    @Prop({ required: true }) data!: any;
  
    // 处理后的部门数据
    processedDepartInfo: ProcessedDepartInfo[] = [];
  
    // 所有指标名称集合
    indexNames: string[] = [];
  
    created() {
      this.processData();
    }
  
     processData() {
      if(!this.data || !this.data.departInfo){
        return;
      }
      // 处理原始数据
      this.processedDepartInfo = this.data.departInfo.map((depart: any) => ({
        ...depart,
        departName: this.data.departMap[depart.departId] || '未知部门',
        categoryName: this.data.categoryMap[depart.categoryId] || '未知分类',
        indexValues: depart.indexNameMap
      }));
  
      // 收集所有指标名称
      const nameSet = new Set<string>();
      this.data.departInfo.forEach((depart: any) => {
        Object.keys(depart.indexNameMap).forEach(name => nameSet.add(name));
      });
      this.indexNames = Array.from(nameSet);
    }
    @Watch('data',{ deep: true })
    dataUpdate(val){
        if(this.data){
            this.processData();
        }
    }
  }
  </script>
  
  <style scoped>
  .el-table >>> .el-table__expanded-cell {
    padding: 20px 50px;
    background-color: #f8f9fa;
  }
  
  .el-table >>> .el-table__expand-icon {
    font-size: 16px;
  }
  </style>